<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <!-- import CSS -->
        <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
        <style>

        </style>
    </head>
    <body>
        <div id="app">
            <el-container>
                <el-header style="background-color: rgb(0,0,0)">
                    <h1 style="color: white;font-size: 22px">
                        YXMall商城后台管理系统
                        <span v-if="user.nickname!=null"
                              style="float: right;font-size: 15px">欢迎{{user.nickname}}回来
                    <a href="javascript:void(0)" @click="logout()">退出登录</a>
                </span>
                    </h1>
                </el-header>
                <el-container>
                    <el-aside width="200px">
                        <el-menu style="height: 500px"
                                 @select="handleSelect"
                                 default-active="2"
                                 class="el-menu-vertical-demo">

                            <el-submenu index="1">
                                <template slot="title">
                                    <i class="el-icon-s-flag"></i>
                                    <span>分类管理</span>
                                </template>
                                <el-menu-item index="1-1">分类列表</el-menu-item>
                                <el-menu-item index="1-2">添加分类</el-menu-item>
                            </el-submenu>

                            <el-submenu index="2">
                                <template slot="title">
                                    <i class="el-icon-picture"></i>
                                    <span>轮播图管理</span>
                                </template>
                                <el-menu-item index="2-1">轮播图列表</el-menu-item>
                                <el-menu-item index="2-2">添加轮播图</el-menu-item>
                            </el-submenu>

                            <el-submenu index="3">
                                <template slot="title">
                                    <i class="el-icon-shopping-cart-2"></i>
                                    <span>商品管理</span>
                                </template>
                                <el-menu-item index="3-1">商品列表</el-menu-item>
                                <el-menu-item index="3-2">商品品牌</el-menu-item>
                            </el-submenu>

                            <el-submenu index="4">
                                <template slot="title">
                                    <i class="el-icon-shopping-cart-2"></i>
                                    <span>订单管理</span>
                                </template>
                                <el-menu-item index="4-1">已处理订单列表</el-menu-item>
                                <el-menu-item index="4-2">未处理订单列表</el-menu-item>
                            </el-submenu>

                            <el-submenu index="5">
                                <template slot="title">
                                    <i class="el-icon-shopping-cart-2"></i>
                                    <span>公告管理</span>
                                </template>
                                <el-menu-item index="5-1">公告列表</el-menu-item>
                                <el-menu-item index="5-2">添加公告</el-menu-item>
                            </el-submenu>

                        </el-menu>
                    </el-aside>
                    <el-main>
                        <el-table v-if="currentIndex=='1-1'"
                                  :data="categoryArr"
                                  style="width: 100%">
                            <!--type=index 设置这一列显示的内容为编号-->
                            <el-table-column type="index" label="编号"></el-table-column>
                            <el-table-column
                                    prop="name"
                                    label="分类名称"
                                    width="180">
                            </el-table-column>
                            <el-table-column label="操作">
                                <!--scope里面装着当前行所对应的对象信息
                                scope.$index 得到当前行对应的对象在数组中的下标
                                scope.row 得到当前行对应的对象
                                -->
                                <template slot-scope="scope">
                                    <el-button size="mini" @click="categoryUpdate(scope.row)"
                                               type="success">修改</el-button>
                                    <el-popconfirm
                                            title="您确定删除此分类吗?"
                                            @confirm="categoryDelete(scope.$index, scope.row)"
                                    >
                                        <el-button slot="reference"  size="mini"
                                                   type="danger">删除</el-button>
                                    </el-popconfirm>
                                </template>
                            </el-table-column>
                        </el-table>
                        <el-table v-if="currentIndex=='2-1'"
                                  :data="bannerArr"
                                  style="width: 100%">
                            <!--type=index 设置这一列显示的内容为编号-->
                            <el-table-column type="index" label="编号"></el-table-column>
                            <el-table-column
                                    label="轮播图"
                                    width="180">
                                <template slot-scope="scope">
                                    <!--scope.row代表当前行对应数组中的对象-->
                                    <img :src="scope.row.url" width="100%">
                                </template>
                            </el-table-column>
                            <el-table-column label="操作">
                                <!--scope里面装着当前行所对应的对象信息
                                scope.$index 得到当前行对应的对象在数组中的下标
                                scope.row 得到当前行对应的对象
                                -->
                                <template slot-scope="scope">
                                    <el-button  size="mini" @click="bannerUpdate(scope.row)"
                                                type="success">修改</el-button>
                                    <el-popconfirm
                                            title="您确定删除此轮播图吗?"
                                            @confirm="bannerDelete(scope.$index, scope.row)"
                                    >
                                        <el-button slot="reference"  size="mini"
                                                   type="danger">删除</el-button>
                                    </el-popconfirm>
                                </template>
                            </el-table-column>
                        </el-table>
                        <div v-if="currentIndex=='3-1'">

                            <el-breadcrumb separator="/">
                                <el-breadcrumb-item :to="{ path: '/' }">商品</el-breadcrumb-item>
                                <el-breadcrumb-item><a href="/insertBanner.html">商品列表</a></el-breadcrumb-item>
                                <el-breadcrumb-item><a href="/insertProduct.html">品牌</a></el-breadcrumb-item>
                                <el-breadcrumb-item>活动详情</el-breadcrumb-item>
                            </el-breadcrumb>

                            <div style="border: 2px solid #d3dce6;
                    height: 60px;top: 10px;
                    line-height: 60px" >
                                <i class="el-icon-document">数据列表</i>
                                <el-button style="float: right;top: 10px;position: relative" type="success"
                                           class="filter-item"
                                           style="margin-left: 10px;"
                                           type="primary"
                                           icon="el-icon-edit"
                                           @click="handleInsertProduct"
                                >添加商品</el-button>
                            </div>
                            <div style="border: 2px solid #d3dce6;top: 10px;position: relative">
                                <el-table
                                        @selection-change="handleSelectionChange"
                                        :data="showProductArr"
                                        style="width: 100%">
                                    <template>
                                        <div style="width: 200px;height: 200px;background-color: #3f3f3f">
                                        </div>
                                    </template>
                                    <el-table-column
                                            type="selection"
                                            width="55">
                                    </el-table-column>
                                    <el-table-column type="index" label="编号"></el-table-column>
                                    <el-table-column prop="title" label="商品标题" width="200"></el-table-column>
                                    <el-table-column prop="price" label="价格" width="80"></el-table-column>
                                    <el-table-column prop="oldPrice" label="原价" width="80"></el-table-column>
                                    <el-table-column prop="saleCount" label="销量" width="80"></el-table-column>
                                    <el-table-column v-if="false" label="不能删，删了有bug" width="80"></el-table-column>
                                    <el-table-column
                                            label="商品图片"
                                            width="100">
                                        <template slot-scope="scope">
                                            <!--scope.row代表当前行对应数组中的对象-->
                                            <img :src="scope.row.url" width="100%">
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="操作">
                                        <template slot-scope="scope">
                                            <el-button size="mini"
                                                       type="success" @click="productUpdate(scope.row)">修改
                                            </el-button>
                                            </el-popconfirm>

                                            <el-popconfirm
                                                    title="您确定删除此商品吗?"
                                                    @confirm="productDelete(scope.$index, scope.row)"
                                            >
                                                <el-button slot="reference"  size="mini"
                                                           type="danger">删除</el-button>
                                            </el-popconfirm>
                                        </template>
                                    </el-table-column>
                                </el-table>
                                <!--分页-->
                                <el-pagination
                                        style="float: right"
                                        layout="total, sizes, prev, pager, next, jumper"
                                        @size-change="handleSizeChange"
                                        @current-change="handleCurrentChange"
                                        :current-page="pageIndex"
                                        :page-size="pageSize"
                                        :page-sizes="[3,5,8,]"
                                        :total="total"
                                >
                                </el-pagination>
                                <el-button
                                        style="float: left"
                                        @click="deleteAllSelection()"
                                        icon="el-icon-delete"
                                        type="danger"
                                        size="mini">批量删除</el-button>
                            </div>
                            <!--添加商品-->
                            <template>
                                <div class="tab-container">
                                    <el-dialog :visible.sync="isShowInsertProduct">
                                        <el-form
                                                :model="p"
                                                ref="dataForm"
                                                label-position="left"
                                                label-width="90px"
                                                style="width: 400px; margin-left:50px;"
                                        >
                                            <el-form-item label="商品标题">
                                                <el-input type="text" v-model="p.title"></el-input>
                                            </el-form-item>
                                            <el-form-item label="商品价格">
                                                <el-input type="text" v-model="p.price"></el-input>
                                            </el-form-item>
                                            <el-form-item label="商品原件">
                                                <el-input type="text" v-model="p.oldPrice"></el-input>
                                            </el-form-item>
                                            <el-form-item label="商品库存">
                                                <el-input type="text" v-model="p.storage"></el-input>
                                            </el-form-item>
                                            <el-form-item label="商品图片">
                                                <el-upload
                                                        action="/upload"
                                                        name="pic"
                                                        limit="4"
                                                        list-type="picture-card"
                                                        :on-success="handleSuccess"
                                                        :on-preview="handlePictureCardPreview"
                                                        :on-remove="handleRemove">
                                                    <i class="el-icon-plus"></i>
                                                </el-upload>
                                                <el-dialog :visible.sync="dialogVisible">
                                                    <img width="100%" :src="dialogImageUrl" alt="">
                                                </el-dialog>
                                            </el-form-item>
                                            <el-form-item label="商品分类">
                                                <el-select v-model="p.categoryId">
                                                    <el-option v-for="c in categoryArr" :label="c.name" :value="c.id"></el-option>
                                                </el-select>
                                            </el-form-item>
                                            <el-form-item label="商品品牌">
                                                <el-select v-model="p.brandId">
                                                    <el-option v-for="b in brandArr" :label="b.name" :value="b.id"></el-option>
                                                </el-select>
                                            </el-form-item>
                                            <el-form-item label="商品内容">
                                                <el-upload
                                                        action="/upload"
                                                        name="pic"
                                                        limit="1"
                                                        list-type="picture-card"
                                                        :on-success="handleSuccess2"
                                                        :on-preview="handlePictureCardPreview"
                                                        :on-remove="handleRemove">
                                                    <i class="el-icon-plus"></i>
                                                </el-upload>
                                                <el-dialog :visible.sync="dialogVisible">
                                                    <img width="100%" :src="dialogImageUrl" alt="">
                                                </el-dialog>
                                            </el-form-item>
                                        </el-form>
                                        <div slot="footer" class="dialog-footer">
                                            <el-button type="success" @click="insert()">添加商品</el-button>
                                            <el-button type="primary" @click="isShowInsertProduct = false">退出</el-button>
                                        </div>

                                    </el-dialog>
                                </div>
                            </template>
                        </div>
                        <div v-if="currentIndex=='3-2'">
                            <div style="border: 2px solid #d3dce6;height: 60px;width:600px;top: 10px;line-height: 60px" >
                                <i class="el-icon-document">品牌列表</i>
                                <el-button style="float: right;top: 10px;position: relative" type="success"
                                           @click="brandInsert"
                                >添加品牌</el-button>
                            </div>
                            <div style="border: 2px solid #d3dce6;top: 10px;width:600px;position: relative">
                                <el-table
                                        @selection-change="handleSelectionChange"
                                        :data="brandArr"
                                        style="width: 100%">
                                    <el-table-column
                                            type="selection"
                                            width="55">
                                    </el-table-column>
                                    <el-table-column type="index" label="编号"></el-table-column>
                                    <el-table-column
                                            prop="name"
                                            label="品牌名称"
                                            width="180">
                                    </el-table-column>
                                    <el-table-column label="操作">
                                        <template slot-scope="scope">
                                            <el-button size="mini" @click="brandUpdate(scope.row)"
                                                       type="success">修改</el-button>
                                            <el-popconfirm
                                                    title="您确定删除此品牌吗?"
                                                    @confirm="brandDelete(scope.$index, scope.row)"
                                            >
                                                <el-button slot="reference"  size="mini"
                                                           type="danger">删除</el-button>
                                            </el-popconfirm>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>
                        </div>

                        <el-table v-if="currentIndex=='4-1'"
                                  :data="orderArr"
                                  style="width: 100%">
                            <!--type=index 设置这一列显示的内容为编号-->
                            <el-table-column type="index" label="编号"></el-table-column>
                            <el-table-column type="index" label="订单编号"></el-table-column>
                            <el-table-column prop="date" label="提交时间"></el-table-column>
                            <el-table-column prop="user" label="用户账号"></el-table-column>
                            <el-table-column prop="price" label="订单金额"></el-table-column>
                            <el-table-column prop="state" label="订单状态"></el-table-column>
                            <el-table-column label="操作">

                                <template slot-scope="scope">
                                    <el-button  size="mini" @click="orderSelect(scope.row)"
                                                type="success">查看订单</el-button>
                                    <el-popconfirm
                                            title="您确定删除此订单吗?"
                                            @confirm="orderDelete(scope.$index, scope.row)"
                                    >
                                        <el-button slot="reference"  size="mini"
                                                   type="danger">删除订单</el-button>
                                    </el-popconfirm>
                                </template>
                            </el-table-column>
                        </el-table>
                        <el-table v-if="currentIndex=='4-2'"
                                  :data="orderArr"
                                  style="width: 100%">
                            <!--type=index 设置这一列显示的内容为编号-->
                            <el-table-column type="index" label="编号"></el-table-column>
                            <el-table-column type="index" label="订单编号"></el-table-column>
                            <el-table-column prop="date" label="提交时间"></el-table-column>
                            <el-table-column prop="user" label="用户账号"></el-table-column>
                            <el-table-column prop="price" label="订单金额"></el-table-column>
                            <el-table-column prop="state" label="订单状态"></el-table-column>
                            <el-table-column label="操作">
                                <!--scope里面装着当前行所对应的对象信息
                                scope.$index 得到当前行对应的对象在数组中的下标
                                scope.row 得到当前行对应的对象
                                -->
                                <template slot-scope="scope">
                                    <el-button  size="mini" @click="orderSelect(scope.row)"
                                                type="success">查看订单</el-button>
                                    <el-popconfirm
                                            title="您确定删除此订单吗?"
                                            @confirm="orderDelete(scope.$index, scope.row)"
                                    >
                                        <el-button slot="reference"  size="mini"
                                                   type="danger">删除订单</el-button>
                                    </el-popconfirm>
                                </template>
                            </el-table-column>
                        </el-table>


                    </el-main>
                </el-container>
            </el-container>
        </div>
    </body>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>

    <!-- import Vue before Element -->
    <script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
    <!-- import JavaScript -->
    <script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
    <script>
        let v = new Vue({
            el: '#app',
            data: function() {
                return {
                    isShowInsertBrand:false,
                    isShowUpdate:false,
                    isShowInsertProduct:false,
                    dialogImageUrl: '',
                    dialogVisible: false,
                    currentIndex:"1-1",
                    categoryArr:[],
                    bannerArr:[],
                    showProductArr:[],
                    productArr:[],
                    orderArr:[],
                    user:{},
                    p:{
                        title:"",
                        url:"",
                        storage:"",
                        price:"",
                        oldPrice:"",
                        content:"",
                        categoryId:"",
                        brandId:"",
                    },
                    oldUrl:"",
                    oldContent:"",
                    brandArr:[],
                    pageIndex: 1, // 第几页
                    pageSize: 3, // 每页几条数据
                    total: 0, // 总条目数
                }
            },
            methods:{
                brandInsert(){
                    let name = prompt("请输入品牌的名称");
                    if (name==null){
                        return;
                    }
                    if (name==''){
                        v.$message.error("品牌名称不能为空");
                        return;
                    }
                    axios.get("/brand/insert?name="+name).then(function (response) {
                        v.brandArr = response.data;

                    })
                },
                brandUpdate(brand){
                    let name = prompt("请输入新的品牌名称");
                    //点击取消
                    if (name==null){
                        return;
                    }
                    if (name==''){
                        v.$message.error("分类名称不能为空");
                        return;
                    }
                    //创建新对象
                    let c = {id:brand.id,name:name};
                    //发出修改请求  把分类对象传递过去
                    axios.post("/brand/update",c).then(function () {
                        brand.name=name;
                    })
                },
                brandDelete(index,brand){
                    //发请求删除品牌
                    axios.get("/brand/delete?id="+brand.id).then(function () {
                        //删除数组中的元素  (删除位置,删除数量)
                        v.brandArr.splice(index,1);
                    })
                },
                categoryUpdate(category){
                    let name = prompt("请输入新的分类名称");
                    //点击取消
                    if (name==null){
                        return;
                    }
                    if (name==''){
                        v.$message.error("分类名称不能为空");
                        return;
                    }
                    //创建新对象
                    let c = {id:category.id,name:name};
                    //发出修改请求  把分类对象传递过去
                    axios.post("/category/update",c).then(function () {
                        category.name=name;
                    })
                },
                categoryDelete(index,category){
                    //发请求删除分类
                    axios.get("/category/delete?id="+category.id).then(function () {
                        //删除数组中的元素  (删除位置,删除数量)
                        v.categoryArr.splice(index,1);
                    })
                },
                handleSelect(key,keyPath){
                    if (key=='1-2'){
                        let name = prompt("请输入分类的名称");
                        //点击取消
                        if (name==null){
                            return;
                        }
                        if (name==''){
                            v.$message.error("分类名称不能为空");
                            return;
                        }
                        //发出添加分类的请求
                        axios.get("/category/insert?name="+name).then(function (response) {
                            //添加分类后把所有的分类请求回来赋值给数组
                            v.categoryArr = response.data;
                        })
                    }else if (key=='2-2'){
                        //跳转到添加轮播图页面
                        location.href="/insertBanner.html";
                    }else{
                        v.currentIndex = key;
                    }
                },
                /****************商品批量操作********************/
                //勾选表格多选框
                handleSelectionChange(val) {
                    this.multipleSelection = val  //当前选中行的数据
                },
                deleteAllSelection() {
                    if (this.multipleSelection.length > 0) {
                        this.$confirm('此操作将删除选中项,是否继续', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(() => {
                            const idList = []
                            for (const v of this.multipleSelection) {
                                idList.push(v.id)
                            }
                            this.deleteSelectAllProducts(idList)
                        }).catch(() => {

                        })
                    } else {
                        this.$notify({
                            title: '提示',
                            message: '请勾选要提交的项！',
                            type: 'warning',
                            duration: 2000
                        })
                    }
                },
                //批量删除商品
                deleteSelectAllProducts(idList) {
                    axios.post("/product/deleteSelectAllProducts",idList).then(function (response) {
                        v.productArr = response.data;
                        v.total = v.productArr.length;
                        v.showProductArr = v.productArr.slice((v.pageIndex - 1) * v.pageSize, v.pageIndex * v.pageSize);
                    })
                },
                /************************************/

                /****************商品增删查、分页***********************/
                getShowProductArr() {
                    //获取截取开始索引
                    let begin = (v.pageIndex - 1) * v.pageSize;
                    //获取截取结束索引
                    let end = v.pageIndex * v.pageSize;
                    //通过索引去截取，从而展示
                    v.showProductArr = v.productArr.slice(begin, end);
                },
                //页数改变，重新截取
                handleCurrentChange(val) {
                    v.pageIndex = val;
                    this.getShowProductArr();
                },
                //条目数改变，也重新截取
                handleSizeChange(val) {
                    v.pageIndex = 1;
                    v.pageSize = val;
                    this.getShowProductArr();
                },
                productDelete(index,product){
                    axios.get("/product/delete?id="+product.id).then(function (response) {
                        v.productArr.splice(index,1)
                    })
                },
                productUpdate(product){
                    location.href="/updateProduct.html?id="+product.id;
                },
                insert(){
                    //发出添加商品的请求
                    axios.post("/product/insert",v.p).then(function (response) {
                        v.productArr = response.data;
                        v.total = v.productArr.length;
                        v.showProductArr = v.productArr.slice((v.pageIndex - 1) * v.pageSize, v.pageIndex * v.pageSize);
                    })
                },
                handleInsertProduct() {
                    this.p = {
                        title:"",
                        url:"",
                        storage:"",
                        price:"",
                        oldPrice:"",
                        content:"",
                        categoryId:"",
                        brandId:"",
                    },
                        this.isShowInsertProduct=true;
                },
                handleSuccess(response,file,fileList){
                    v.p.url = response;
                },
                handleSuccess2(response,file,fileList){
                    v.p.content = response;
                },
                handleRemove(file, fileList) {
                    console.log(file, fileList);
                    axios.get("/remove?url=" + v.p.url).then(function () {
                        v.p.url = "";
                    });
                    axios.get("/remove?url="+v.p.content).then(function () {
                        v.p.content="";
                    })
                },
                handlePictureCardPreview(file) {
                    this.dialogImageUrl = file.url;
                    this.dialogVisible = true;
                }
                /***************************************/
            },
            created:function () {
                //发请求获取分类信息
                axios.get("/category/select").then(function (response) {
                    v.categoryArr = response.data;
                });
                //发请求获取品牌信息
                axios.get("/brand/select").then(function (response) {
                    v.brandArr = response.data;
                });
                //发请求获取轮播图数据
                axios.get("/banner/select").then(function (response) {
                    v.bannerArr = response.data;
                });
                //发请求获取所有商品数据
                axios.get("/product/select/admin").then(function (response) {
                    v.productArr = response.data;
                    v.total = v.productArr.length;
                    v.showProductArr = v.productArr.slice((v.pageIndex - 1) * v.pageSize, v.pageIndex * v.pageSize);
                });
                //发请求获取当前登录的用户对象
                axios.get("/currentUser").then(function (response) {
                    v.user = response.data;
                    if (v.user==""){
                        alert("请先登录!")
                        location.href="/login.html"
                    }
                })
            }
        })
    </script>
</html>